<template>
  <div class="contaibner">
    <div>
      <el-input v-model="queryParams.tableName"
                clearable
                class="searchKeyclass"
                size="mini" style="width: 420px;margin-right: 10px;"
                focus
                @keydown.native.prevent.enter="triggerSearch()"
      />
      <el-button type="primary" size="mini"
                 @click="()=>{
       triggerSearch()
      }"
      >搜索
      </el-button>
      <button @click="()=>{triggerjson()}">json</button>
    </div>
    <el-table :data="dataList" height="520px">
      <el-table-column label="key">
        <template slot-scope="scope">
         <span style="font-size: 12px">{{ scope.row.Field }}</span>
        </template>
      </el-table-column>
      <el-table-column label="描述">
        <template slot-scope="scope">
          <div v-html="scope.row.Comment" style="font-size: 12px"></div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import axios from 'axios'
import { copyTextToClipboard } from '@/utils/clipboard';
import { alertSuccess } from '@base/utils';
function upperFirstConcat(str) {
  str = str.toLowerCase();
  str = str.replace(/\b\w+\b/g, word => {
    return word.substring(0, 1).toUpperCase() + word.substring(1);
  });

  return str;
}

function underlineToCamel(str) {
  return str?.replace(/_([a-z])/g, function (match, group1) {
    return group1.toUpperCase();
  });
}

export default {
  data() {
    return {
      datasourceDto: undefined,
      queryParams: {
        datasourceDto: undefined,
        tableName: '',
      },
      dataList: [],

    };
  },

  methods: {

    triggerSearch() {
      this.getInfoList();
    },
    async getInfoList() {
      var rsult = await axios.post(`/api/databaseui/tableproperty`, this.queryParams).then(res => res.data);
      var _dataList = rsult && rsult.data || [];
      this.dataList = _dataList;


    },

    async initByDialog(_data) {
      this.datasourceDto = _data?.datasourceDto;
      this.queryParams.tableName = _data?.tableName;
      this.queryParams.datasourceDto = _data?.datasourceDto;



      //setTimeout(()=>{
      //  $(this.$refs['contaibner']).find('.searchKeyclass').find('input').focus()
      //},200)

      if(  this.queryParams.tableName){
       this.getInfoList()
      }



    },


    async submitByDialog() {
      //validate
      //data operation
      //ajax 提交
      return { success: true };
    },
    triggerjson: function () {
      var json = {};
      for (let i = 0; i < this.dataList.length; i++) {
        json[underlineToCamel(this.dataList[i]?.Field)] = '';
      }
      copyTextToClipboard(JSON.stringify(json));
      alertSuccess('json复制成功');

    },

  },
};
</script>
